<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" size="mini" @click="showModal">新增用户</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="user"
        label="用户名"
      />
      <el-table-column
        prop="role"
        label="角色"
      />
      <el-table-column
        prop="status"
        label="用户状态"
      >
        <template slot-scope="scope">
          <span v-text="scope.row.status == 1 ? '正常' : '禁用' " />
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData,-1)"
          >
            移除
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData, 1)"
          >
            启用
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope, tableData, 0)"
          >
            禁用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户新增" :visible.sync="show">
      <el-form
        :model="form"
      >
        <el-form-item
          label="用户名"
          label-width="80"
        >
          <el-input v-model="form.user" />
        </el-form-item>
        <el-form-item
          label="角色"
          label-width="80"
        >
          <el-select v-model="form.role">
            <el-option
              v-for="item in roleArr"
              :key="item._id"
              :label="item.role"
              :value="item.role"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      roleArr: [],
      tableData: [],
      show: false,
      form: {
        user: '',
        role: ''
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$role.fetchRoleUserList().then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    showModal() {
      this.show = true
      console.log(this.roleArr)
      if (this.roleArr.length === 0) {
        this.$role.fetchRoleList().then(res => {
          console.log(res)
          this.roleArr = res.data
        })
      }
    },
    submit() {
      if (!this.form.user.trim() || !this.form.role) return this.$message({ message: '字段缺失', type: 'warning' })
      // console.log(this.form);
      this.$role.fetchAddRoleUser(this.form).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 2000
        })
        this.show = false
        this.form = {}
        this.init()
      })
    },
    changeStatus(_id, status) {
      this.$role.fetchEditUrlRole({ _id, status }).then(res => {
        this.$message({ type: 'success', message: res.msg })
        console.log(res)
      })
    },
    deleteRow(scope, rows, key) {
      const { _id } = scope.row
      console.log(key)
      switch (key) {
        case -1:
          this.$role.fetchDelUrlRole({ _id }).then(res => {
            this.$message({ type: 'success', message: res.msg })
          })
          rows.splice(scope.$index, 1)
          break
        case 1:
          this.changeStatus(_id, key)
          scope.row.status = key
          break
        case 0:
          this.changeStatus(_id, key)
          scope.row.status = key
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
